<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
	String productId = request.getParameter("productId");
	String mark1 = request.getParameter("mark");
	String picUrl = request.getParameter("picUrl");
	String top1 = request.getParameter("top1");
	String left = request.getParameter("left");
	String height = request.getParameter("height");
	String width = request.getParameter("width");
	String bgPic = request.getParameter("bgPic");
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
<html>
	<head>
		<meta http-equiv="X-UA-Compatible" content="IE=9" />
		<meta property="qc:admins" content="07216227476305205456375" />
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title>定制</title>
		<link rel="shortcut icon" href="/img/W.png" />
		<script src="jquery/js/jquery-1.8.2.js"></script>
		<script src="jquery/js/jquery-ui-1.9.0.custom.min.js"></script>
		<link rel="stylesheet" href="jquery/css/ui-lightness/jquery-ui-1.9.0.custom.min.css" />
		<link rel="stylesheet" type="text/css" href="/css/login.css" />
		<link href="/css/xixiaoming/paticipateDetail.css" rel="stylesheet"/>
		<link rel="Stylesheet" type="text/css" href="/inc/wColorPicker.css" />
		<link rel="stylesheet" type="text/css" href="/css/xixiaoming/fancybox.css" />
		<script type="text/javascript" src="/inc/wColorPicker.js"></script>
		<link rel="Stylesheet" type="text/css" href="/wPaint.css" />
		<script type="text/javascript" src="/wPaint.js"></script>
		<script type="text/javascript" src="/js/login.js"></script>
		<script type="text/javascript" src="/js/bgjs/js/script.js"></script>
		<script type="text/javascript" src="/js/customjs/custom.js"></script>
		<script type="text/javascript" src="/js/customjs/product.js"></script>

		<script type="text/javascript" src="js/myCustonAndShoppingCar/bgiframe.js"></script>
<script type="text/javascript" src="js/myCustonAndShoppingCar/weebox.js"></script>
<link type="text/css" rel="stylesheet" href="css/xixiaoming/weebox.css" />

		<style type="text/css">
body,ul,li {
	padding: 0;
	margin: 0
}

ul,li {
	list-style: none;
}

.img-scroll {
	position: relative;
	margin: 20px auto;
	width: 666px;
	margin-left: 210px;
}

.img-scroll .prev,.img-scroll .next {
	position: absolute;
	display: block;
	width: 50px;
	height: 100px;
	background-repeat: no-repeat;
	margin-top: 48px; top : 0;
	color: #FFF;
	text-align: center;
	line-height: 100px;
	color: #FFF;
	text-align: center;
	line-height: 100px;
	: no-repeat; margin-top: 48px; top: 0;
	top: 0;
}

.img-scroll .prev {
	left: 0;
	cursor: pointer;
	background-image: url("js/bgjs/images/custom_selectleft.gif");
}

.img-scroll .next {
	right: 0;
	cursor: pointer;
	background-image: url("js/bgjs/images/custom_selectright.gif");
}

.img-list {
	position: relative;
	width: 550px;
	height: 100px;
	margin-left: 60px;
	overflow: hidden
}

.img-list ul {
	width: 9999px;
}

.img-list li {
	float: left;
	display: inline;
	width: 100px;
	margin-right: 10px;
	height: 100px;
	text-align: center;
	line-height: 100px;
}

html {
	overflow: scroll;
}

.btn_queding {
	border: solid 1px #666;
	padding: 2px;
	width: 65px;
	filter: progid.DXImageTransform.Microsoft.Gradient (   GradientType =
		0, StartColorStr =   #ffffff, EndColorStr =   #ECE9D8 );
}

.button1 {
	border: solid 2px #dcdcdc;
	padding: 4px 14px 4px 34px;
	color: #959595;
	background: url("images/ok.gif") no-repeat 8px center;
	background-color: #f9f9f9;
	font-family: "Arial", "Tahoma", "微软雅黑", "雅黑";
	vertical-align: middle;
	margin: 2px;
	line-height: 18px;
	font-size: 10px;
}

.bx_container {
	width: 530px;
}

ul #example {
	left: -157px;
}
</style>
<script type="text/javascript">
function showUpload(){
	$("#uploaddiypicture").dialog("open");
}
		var json = "";
		var imgIndex="";
$(document).ready(function(){
alert("进入初始化");
var productId = $("#productId").val();
if(<%=height%>!=null){
addimg2('<%=picUrl%>',<%=top1%>,<%=left%>,<%=width%>,<%=height%>);
}
$.post(
   "productInfo",
   {"id":productId,dd:new Date().getTime()},
    function(data){
    var name = data.product.name;
    var html = data.product.describe;
     json = data.product.autoLogos;
     alert("初始化的产品定位信息:"+json);
      $("#productDesc").append(html);
    });
$.post(
   "showShareProducts",
   {"productId":productId},
   function(data){
   var shareDiv = "<h2 style=margin-left:-85%;>分享产品：</h2><ul style=list-style-type:none;>";
  	 $.each(data.customs,function(index,value){
  	 var url = value.customPic;
     var name = value.customName;
     var customId = value.customId;
  	 var html = "<li style=float:left;width:230px;><div><table><tr><td><a href=showProduct?customId="+customId+">" +
							"    <img src="+url+
					     " width=220px;></a></td><tr><td><a href=showProduct?customId="+customId+">"+name+"</a></td></tr></table></div></li>";
  	   shareDiv = shareDiv+html;
  	 });
  	 $("#shareDiv").html(shareDiv);;
   }
);
  $.post("getAllStyle",{url:'<%=bgPic%>'},function(data){
  var html = "";
     $.each(data.urls,function(index,value){
     html = html+"<li style=float:left;list-style:none outside none; margin-right:10px;><img height=107 width=107 onclick=changeBg('"+value+"') src="+value+"></li>";
     });
     $("#example1").html(html);
  });

 DY_scroll('.img-scroll','.prev','.next','.img-list',5,false);// true为自动播放，不加此参数或false就默认不自动
 var len  = $("#imgLength").val();
 if(len<5){
   $(".prev").css("display","none");
    $(".next").css("display","none");
 }
});

function add(url){
	var obj = JSON.parse(json);
	var top1 = obj.top;
	var left = obj.left;
	var width = obj.width;
	var height = obj.height;
	addimg2(url,top1,left,width,height);
}
function addimg2(url,top1,left,width,height) {
	var div = document.getElementById("img"+index);
	div.setAttribute("style", "position:absolute;left:"+left+"px; top:"+top1+"px;");
	arrayImg.push("img" + index);
   	imgIndex = "#img"+index;

	var img = document.createElement("img");
	img.setAttribute("id", "pic" + index);
	img.setAttribute("src", url);
	img.setAttribute("style", "cursor:move;height:"+height+"px;width:auto;");

	var cancel = document.createElement("img");
	cancel.setAttribute("src", "img/cancel_03.png");
	cancel.setAttribute("style","display:block; position:relative; float:left; left:0; top:0; width:12px; height: 10px");
	cancel.setAttribute("onclick", "cancelimg(" + index + ")");

	var div2 = document.createElement("div");
	div2.setAttribute("style", "width:12px; height: 10px");
	div2.appendChild(cancel);
	div.appendChild(div2);
	div.appendChild(img);
	document.getElementById("bg").appendChild(div);

	$("#img" + index).mouseover(function() {
		$(this).children().eq(0).children().eq(0).fadeIn("slow");
	});
	$("#img" + index).mouseout(function() {
		$(this).children().eq(0).children().eq(0).fadeOut("slow");
	});
	$("#img" + index).draggable({
		containment : '#bg'
	});

	//判断图片是否超出
	var imgindex=$("#pic"+index);
	if(imgindex.width()>(640-left)){
		imgindex.parent().css("left","100px");
		imgindex.css("width","114px");
		imgindex.css("height","auto");
	}
	//------------------
	$("#pic" + index).resizable();
	$("#pic"+index).css("width","auto");
	$("#pic"+index).parent().css("width","auto");

	index++;
	$.getJSON("getTypesNameByTypeUrl.action", {
		url : url
	}, function(data) {
		var dd = data.typename;
		if (dd != "" && dd != 'null' && dd != null) {
			var temp = $("#forname").val();
			if (temp == "") {
				temp += dd;
			} else {
				temp += ("." + dd);
			}
			$("#forname").val(temp);
			//alert('添加图片的名字：' + temp);
		}
	});
}

function SendCar(carname) {
	$.post("SendCarMark.action", {
		CarName : carname
	}, function(data) {
		$("#Carpic").html("");
		for ( var i = 0; i < data.jsonob1.length; i++) {
			$("<img class='diypic' onclick=addimg('" + data.jsonob1[i]+ "') src='" + data.jsonob1[i] + "' />")
			.appendTo($("<div style='margin:5px;'></div>").appendTo($("#Carpic")))
			.draggable({
				revert : 'invalid',
				opacity : 0.7,
				helper : 'clone',
				scope : 'drop'
			});
		}
	}, "json");
	$.post("getDefaultCarMark",{seriesName:carname},function(data){
		add("CarMark/"+data.typesPic);
		showOthers("CarMark/"+data.typesPic);
	});
}

function inputWordFocus(){
	var tele = document.getElementById("word");
	if (tele.innerHTML == "请输入自定义文字") {
		tele.innerHTML = "";
	}
	tele.style.color = "#000000";
}
function hideTypeSelect(){
	$("#leftlist").slideUp("slow");
	$("#openchexing").show();
}
</script>

	</head>

	<body style="width: 100%; margin: 0px; padding: 0px;" id="te">
		<input type="hidden" value="${productId }" id="productId" />
		<input type="hidden" value="${picdetaillistsize}"
			id="hiddenpicdetaillistsize" />
		<input type="hidden" value="${customId}" id="hiddencustomid" />
		<img src="img/022.gif" id="loading_img"
			style="display: none; position: absolute; z-index: 999;" />
		<div id="fancybox-overlay"
			style="background-color: rgb(119, 119, 119); height: 1823px; opacity: 0.7; cursor: pointer; display: none;"
			onclick="viewclose()"></div>
		<div id="paintBody"
			style="position: absolute; z-index: 1101; display: none; width: 630px; top: 100px; left: 431px; height: auto">
			<div id="wPaint"
				style="position: relative; width: 500px; height: 300px; background: #CACACA; border: solid black 1px; overflow: hidden;">
			</div>
			<br />
			<div style="float: left; margin-left: 50px">
				<input type="button" value="确定" onclick="saveImage()"
					style="border: 0; background-color: #94b8e9" />
				<input type="button" value="清空" onclick="clearCanvas()"
					style="border: 0; background-color: #94b8e9" />
			</div>
		</div>

		<div id="fancybox-wrap"
			style="display: none; width: 630px; top: 88px; left: 431px; height: auto;">
			<div id="fancybox-outer">
				<div class="fancybox-bg" id="fancybox-bg-n"></div>
				<div class="fancybox-bg" id="fancybox-bg-ne"></div>
				<div class="fancybox-bg" id="fancybox-bg-e"></div>
				<div class="fancybox-bg" id="fancybox-bg-se"></div>
				<div class="fancybox-bg" id="fancybox-bg-s"></div>
				<div class="fancybox-bg" id="fancybox-bg-sw"></div>
				<div class="fancybox-bg" id="fancybox-bg-w"></div>
				<div class="fancybox-bg" id="fancybox-bg-nw"></div>
				<div id="fancybox-content"
					style="width: 610px; height: 480px; border-top-width: 10px; border-right-width: 10px; border-bottom-width: 10px; border-left-width: 10px;">
					<img id="fancybox-img" src="" alt="" />
				</div>
				<a id="fancybox-close" style="display: block;" onclick="viewclose()"></a>
				<a href="javascript:;" id="fancybox-left" style="display: none;">
					<span class="fancy-ico" id="fancybox-left-ico"></span> </a>
				<a href="javascript:;" id="fancybox-right" style="display: none;">
					<span class="fancy-ico" id="fancybox-right-ico"></span> </a>
				<div id="fancybox-title" class="" style="display: none;"></div>
				<br />
				<input type="button" value="保存到购物车"onclick="getCustomName()" />
				&nbsp;&nbsp;&nbsp;&nbsp;
				<input type="button" value="直接付款"onclick="payForCustom()" />
			</div>
		</div>
		<jsp:include page="top.jsp"></jsp:include>
		<div style="width: 1100px; height: 50px;"></div>
		<div id="custom_content">

			<div id="leftSelectDiv"
				style="top: 82px; display: block; width: 0px; position: absolute; z-index: 900; padding: 0px; outline: 0; border: 0px solid #a0b3d6; word-wrap: break-word; float: left; text-align: left; left: 236px;">
				<div id="leftlist"
					style="top: 48px; width: 148px; position: relative;border-style:solid;border-width:1px;border-color:#A8D9E9;">
					<div id="typeSelect">
						<img src="img/chexing1.png" onclick="hideTypeSelect()" />
						<div style="height: 460px; overflow-y: auto; width: 148px;">
							<table width="100%">
								<c:forEach items="${list}" var="fli">
									<tr><td width="16%">
										<%-- <a href="javascript:void(0);" id="${fli.brandsId}" onclick="zhan1(${fli.brandsId})">
											<img id="tupian${fli.brandsId}" src="img/nolines_plus.gif" />
										</a> --%>
										<img style="cursor:pointer;" id="tupian${fli.brandsId}" onclick="zhan1(${fli.brandsId})" src="img/nolines_plus.gif" />
										</td><td>
										<a onclick="zhan1(${fli.brandsId})" href="javascript:void(0);" style="color:black;font-size:11px;font-family:微软雅黑;">${fli.brandsName}</a></td></tr><tr><td colspan="2">
										<div id="second${fli.brandsId}" style="display: none;" isclick="false">
											<ul id="uu${fli.brandsId}"></ul>
										</div></td>
									</tr>
								</c:forEach>
							</table>
						</div>
					</div>
				</div>
			</div>
			<div id="bg"
				style="border:1px solid #A8D9E9;left:385px;background:url('${bgPic}') no-repeat scroll center bottom transparent;width: 640px;height: 480px;float: left;position: relative;">
				<%
					int tt = 0;
				%>
				<c:forEach items="${picdetaillist}" var="p">
					<div id="divv<%=tt%>"
						style="position:absolute;left:${p.left}px;top:${p.top }px;width:${p.width }px;height:${p.height }px">
						<div style="height: 10px; display: block" id="chacha<%=tt%>">
							<img id="imgc<%=tt%>" src="img/cancel_03.png" value="<%=tt%>"
								style="display: block; position: relative; left: -10px; float: left; width: 12px; height: 10px;" />
						</div>
						<input type="hidden" value="1" id="flag<%=tt%>" name="flagname" />
						<img id="imgg<%=tt++%>" src="${p.picUrl }"
							style="width:${p.width }px;height:${p.height }px;" />
					</div>
				</c:forEach>
				<img id="openchexing"
					onclick="$('#leftlist').slideDown('slow');$('#openchexing').hide();"
					src="img/chexing.png"
					style="display: none; position: absolute; top: 0px; left: -20px;" />
				<img
					style="position: absolute; top: 412px; left: 641px; display: none;"
					src="img/gongju.png"
					onclick="$('#tooltip').slideDown('slow');$('#opengongju').hide();"
					id="opengongju" />

						<div id="img0" style="display:none"></div>
						<div id="img1" style="display:none"></div>
						<div id="img2" style="display:none"></div>
						<div id="img3" style="display:none"></div>
						<div id="img4" style="display:none"></div>
						<div id="img5" style="display:none"></div>
						<div id="img6" style="display:none"></div>
						<div id="img7" style="display:none"></div>
						<div id="img8" style="display:none"></div>
						<div id="img9" style="display:none"></div>


			</div>
			<div id="tooltip"
				style="float: left; clear: both; position: absolute; float: left; left: 1026px; top: 130px;">
				<img src="img/custom_type.gif"
					onclick="$('#tooltip').slideUp('slow');$('#opengongju').show();"
					style="border-left: #A8D9E9 solid 1px; border-right: #A8D9E9 solid 1px; border-top:#A8D9E9 solid 1px;"/>
				<div id="custom_choose"
					style="width: 148px; position: relative; height: 460px; border-left: #A8D9E9 solid 1px; border-right: #A8D9E9 solid 1px; border-bottom: #A8D9E9 solid 1px;">
					<%--<img alt="打开画板" src="img/painter.png"
							width="190px" height="20px" onclick="openPainter()"> --%>
					<%--<img
							src="img/diypic_03.png" width="190px" height="20px" />
						--%>
					<input type="button"
						style="border: 0; background-color: transparent; background-image: url(img/tuan.png); width: 148px; height: 20px;"
						value="" onclick="showUpload()" />
					<div id="Carpic" style="height: 332px; overflow-y: auto">
						<img src="img/a.png" class="diypic"
							onclick="add('img/a.png')" />
						<img src="img/b.png" class="diypic"
							onclick="add('img/b.png')" />
						<img src="img/c.png" class="diypic"
							onclick="add('img/c.png')" />
						<img src="img/d.png" class="diypic"
							onclick="add('img/d.png')" />
						<img src="img/e.png" class="diypic"
							onclick="add('img/e.png')" />
						<img src="img/f.png" class="diypic"
							onclick="add('img/f.png')" />
						<img src="img/g.png" class="diypic"
							onclick="add('img/g.png')" />
					</div>
					<form id="addword" method="post">
						<div style="float: left; width: 40px;">
							<div onclick="coloropen(event)" id="custom_color"
								style="width: 40px; height: 15px; cursor: pointer; border: 1px solid #000; float: right; margin-top: 4px;">
								<table id="tabletable" style="width: 40px; height: 15px;">
									<tr>
										<td style="background: black;">
										</td>
										<td style="background: grey;">
										</td>
										<td style="background: white;">
										</td>
									</tr>
								</table>
							</div>
							<div id="colorpane"
								style="position: absolute; z-index: 999; display: none;"></div>
							<input type="hidden" name="color" value="rgb(0, 0, 0)" />
						</div>
						<select id="fontfamilyselect" name="family"
							style="width: 55px; height: 20px">
						</select>
						<select onchange="changeSelectSize(this.value)" id="sizeselect"
							style="float: right; width: 45px; height: 20px">
						</select>
						<input type="text" name="size" id="fontsize" value="88"
							onblur="javascript:if(this.value==''){alert('请选择字体大小！');this.value='88';}"
							style="width: 25px; height: 14px; position: relative; top: -20px; left: 22px;" />
						<textarea name="word" id="word"
							style="width: 140px; height: 40px; margin-top: -18px; font-size: 12px; resize: none; color: #8a8a8a;"
							onfocus="inputWordFocus()">请输入自定义文字</textarea>
						<input type="button"
							style="float: left; border: 0; background-color: transparent; background-image: url(img/wordqueding.png); width: 148px; height: 20px;"
							value=" " onclick="checkaddword()" />
					</form>
					<!-- <div id="uploaddiypicture">
						<form action="picupload.action" id="form1" name="form1"
							encType="multipart/form-data" method="post" target="hidden_frame"
							style="text-align: left; font-size: 14px;">
							<input type="text" id="txt" name="txt"
								style="position: relative; left: 0px; width: 140px; top: 5px; height: 24px; border: 0;"
								value="点击此处选择图片" />
							<input type="file" id="file" onchange="txt.value=this.value"
								name="myfile" size="17px"
								style="width: 200px; height: 24px; position: relative; left: 0; top: -19px; filter: alpha(opacity = 0); -moz-opacity: 0; opacity: 0;" />
							<input type="submit" value="上传"
								onmouseover="this.style.borderColor='#75cd02';"
								onmouseout="this.style.borderColor='#dcdcdc';" class="button1"
								style="position: relative; left: 133px; width: 65px; top: -43px; height: 24px" />
							<iframe name='hidden_frame' id="hidden_frame"
								style="display: none;"></iframe>
						</form>
					</div> -->
					<script type="text/javascript">
							function callback() {
								document.getElementById("file").outerHTML = document.getElementById("file").outerHTML;
							}
						</script>
					<img src="img/shoppingcar.png"
						style="width: 148px; height: 20px; cursor: pointer;"
						onclick="yulan()" />
				</div>
			</div>

			<div style="height: auto">
				<c:if test="${bgpiclist!='[]'}">
					<div
						style="margin-left: 169px; clear: both; position: absolute; width: 1050px; top: 648px;">

						<div class="img-scroll">
							<span class="prev"></span>
							<span class="next"></span>
							<div class="img-list">
								<ul>
									<c:forEach items="${bgpiclist }" var="bg" varStatus="vs">
										<li>
											<img style="width: 100px; height: 100px;" src="${bg.picUrl}"
												onclick="changeBg('${bg.picUrl}');"/>
										</li>
										<c:set var="imgLength" value="${vs.count}"></c:set>
									</c:forEach>
								</ul>
								<input type="hidden" id="imgLength" value="${imgLength}" />
							</div>
						</div>
						<div id="otherProducts" style="position: relative;">


						</div>
						<div
							style="text-align: left; width: 900px; overflow: hidden; position: relative; margin-left: 20px;"
							id="productDesc">
							<h2>
								产品介绍：
							</h2>

						</div>
						<div id="shareDiv" style="">
							<h1>
								此款产品：
							</h1>
						</div>
						<div id="test" style="margin-left: -14%;">
							<jsp:include page="bottom.jsp"></jsp:include>
						</div>
					</div>

				</c:if>

			</div>

		</div>

		<input type="hidden" value="" id="forname" />
		<div id="inputdesignmsg" style="display:none;">
			<fieldset style="font-family:'微软雅黑';font-size:13px;text-align:left;">
				请给你的设计取个名字：
				<input type="text" id="inputcustomname"
					class="text ui-widget-content ui-corner-all" value="${customname}" />
				<br />
				备注：
				<input type="text" id="inputcustomcontent"
					class="text ui-widget-content ui-corner-all"
					value="${customcontent}" />
			</fieldset>
			<input type="button" onclick="inputCustomMsgButton()" value="确定"
				class="btn_queding" />
		</div>
		<script type="text/javascript">
			addDrop();
		</script>
	</body>
</html>
